<template>
	<view class="container">
		<view class="bank-list">
			<!-- 银行卡列表 -->
			<view class="bank-card" v-for="(card, index) in bankCards" :key="card.id" @click="handleItemClick(card.id)">
				<view class="bank-icon">
					<text class="bank-short-name">{{ getBankShortName(card.bank_name) }}</text>
				</view>
				<view class="bank-info">
					<view class="bank-name">{{ card.bank_name }}卡({{ card.bank_card.slice(-4) }})</view>
					<view class="add-time">
						{{ card.createtime }}
					</view>
				</view>
			</view>

			<!-- 添加银行卡按钮 -->
			<view class="add-card" @click="addBankCard">
				<view class="add-icon">+</view>
				<view class="add-text">添加银行卡</view>
			</view>
		</view>
	</view>
</template>

<script>
import { bankCard } from '@/api';
export default {
	data() {
		return {
			bankCards: []
		};
	},
	onShow() {
		this.getList();
	},
	methods: {
		async getList() {
			const res = await bankCard.bankList();
			console.log(res);
			this.bankCards = res.data || [];
		},
		handleItemClick(id) {
			// 跳转到编辑银行卡页面
			uni.navigateTo({
				url: `/pages/user/bind-bank/add-bank-card?id=${id}`
			});
		},
		getBankShortName(name) {
			if (!name) return '';
			return name.length > 2 ? name.substring(0, 1) : name;
		},
		addBankCard() {
			// 跳转到添加银行卡页面
			uni.navigateTo({
				url: '/pages/user/bind-bank/add-bank-card'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding: 20rpx 30rpx;
	min-height: 100vh;
	background-color: #f5f5f5;
}

.bank-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	padding: 20rpx 0;
}

.bank-card,
.add-card {
	height: 200rpx;
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 14rpx;
	padding: 0 38rpx;
}

.bank-icon {
	width: 115rpx;
	height: 115rpx;
	border-radius: 50%;
	background-color: #ff5a5f;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 30rpx;

	.bank-short-name {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
	}
}

.bank-info {
	flex: 1;

	.bank-name {
		font-weight: 500;
		font-size: 30rpx;
		color: #2c2e2e;
		margin-bottom: 24rpx;
	}

	.add-time {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}
}

.add-card {
	justify-content: center;
	align-items: center;

	.add-icon {
		width: 49rpx;
		height: 49rpx;
		border-radius: 50%;
		background-color: #ff8c00;
		color: #ffffff;
		font-size: 36rpx; /* 减小字体大小，避免溢出 */
		line-height: 49rpx; /* 行高等于容器高度，强制垂直居中 */
		display: flex;
		justify-content: center;
		align-items: center;
		/* 可选：消除字体默认间距 */
		padding: 0;
		margin: 0;
	}

	.add-text {
		margin-left: 14rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #2c2e2e;
	}
}
</style>
